<template>
  <div class="model-manage">
    <div class="setting-content">
      <!-- <h2 class="setting-header">
        <strong>资源管理</strong>
      </h2> -->
      
      <div class="list-content">
        <!-- 添加左侧筛选树 -->
        <!-- <div class="filter-sidebar" v-loading="modelListLoading">
          <div class="filter-group filter-group1">
            <div class="filter-title" >
              <div class="title-left" @click="folderSelectPageAsync">
                <i class="iconfont">&#xe6e3;</i>
                <span>全部</span>
              </div>
              <i class="iconfont arrow-icon" @click="handleClickMine" :class="{ 'is-expand': isMyFileExpand }">&#xe645;</i>
            </div>
            <ul class="filter-list" v-show="isMyFileExpand">
              <li 
                v-for="(model, index) in modelList" 
                :key="model.id"
                class="filter-item"
                :class="{ 
                  active: modelForm.modelId === model.id,
                  'model-line': index == 2
                }"
                @click="handleModelNodeClick(model)"
              >
                <span class="model-name">{{ model.name }}</span>
              </li>
            </ul>
          </div>
        </div> -->

        <!-- <div class="filter-group">
          
          </div> -->

        <!-- 原有的文件列表区域 -->
        <div class="file-list-container">
          <div class="header-option">
            <el-select
              v-model="modelForm.modelId"
              placeholder="请选择模型"
              class="model-select"
              @change="handleModelNodeClick"
              style="width: 150px;margin-right: 10px;"
            >
              <el-option
                v-for="model in allModelList"
                :key="model.id"
                :label="model.name"
                :value="model.id"
              />
            </el-select>
            <el-button :disabled="fileType != 1" v-permission="['build:model:model:add'] || true" type="primary" @click="handleAddFolder">新建共享组<span v-if="modelForm.modelId">（{{toShowType(modelForm.modelId)}}）</span></el-button>
            <el-button :disabled="fileType != 2" v-permission="['build:model:model:add'] || true" type="primary" @click="handleAddFile">新建资源 <span v-if="modelForm.modelId">（{{toShowType(modelForm.modelId)}}）</span></el-button>
            <el-button type="danger" v-show="fileSelectionList.length" @click="handleBatchDelete()">批量放入回收站</el-button>
          </div>
          <!-- 文件路径 -->
          <el-page-header :title="'上一级'" @back="folderSelectPageAsync" style="margin-bottom: 10px;">
            <template #content>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item @click="folderSelectPageAsync()">
                  <span class="file-path">根目录</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </template>
          </el-page-header>
          <!-- 文件列表 -->

          <RuifoxTable
            :loading="curFileListLoading"
            :default-index="false"
            :default-checkbox="true"
            v-model:tableData="curFileList"
            v-model:fieldList="fieldList"
          >
            <!-- 多选 -->
            <template #default-checkbox='{element}'>
              <div class="table-div-check">
                <el-checkbox class="unmover" v-model="element.checked" @change="handleSelectionChange(element)" size=""/>
              </div>
            </template>
            <template #name='{element}'>
              <div class="file-item-box">
                <div class="file-item">
                  <div class="thumb-box" v-if="fileType == 2 && element.modelId == 1">
                    <img class="thumb-img" :src="element.resourceData?.url" alt/>
                  </div>
                  <img class="file-img" v-else :src="element.fileExt" alt />
                  <span v-if="fileType == 1" class="file-name" @click="handleFileClick(element)">{{ element.name }}</span>
                  <span v-else class="file-name" @click="handleUpdateFile(element)">{{ element.resourceData?.title }}</span>
                </div>
              </div>
            </template>
            <template #curShare='{element}'>
              <span v-if="fileType == 1">{{ toshowKjParams(element).label }}</span>
              <span v-else>{{ toshowKjParams(curShare).label }}</span>
            </template>
            <template #update_time='{element}'>
              <span v-if="fileType == 1">
                <span v-if="element.updateTime">{{ formatDate(element.updateTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                <span v-else>-</span>
              </span>
              <span v-else>
                <span v-if="element?.resourceData?.update_time">{{ formatDate(element?.resourceData?.update_time, 'yyyy-MM-dd HH:mm:ss') }}</span>
                <span v-else>-</span>
              </span>
            </template>
            <template #modelId='{element}'>
                <span>{{ toShowType(element.modelId) }}</span>
              </template>
            <template #options='{element}'>
              <div class="table-td-option unmover">
                <el-button type="primary"  v-if="fileType == 2 && element.modelId <= 3 " link @click="handleDownload(element)" >下载</el-button>
                <el-button type="primary" v-if="fileType == 1"  link @click="handleUpdateFolder(element)" >编辑</el-button>
                <el-button type="primary" v-else link @click="handleFileClick(element)" >查看</el-button>
                <el-dropdown>
                  <span class="el-dropdown-link unmover">
                    <i class="iconfont">&#xe78d;</i>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleBatchDelete(element)">放入回收站</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </RuifoxTable>
          <PaginationView
            :total="queryData.total"
            :pageSize="queryData.pageSize"
            :currentPage="queryData.currentPage"
            @changeSize="handleSizeChange"
            @currentChange="handleCurrentChange"
            @refreshList="handleSearch"
          />
        </div>
      </div>
    </div>
    <el-dialog v-model="groupDialog" :title="'共享组'" width="900px">
      <el-form :model="groupForm" ref="groupFormRef" :rules="groupRules" label-width="auto" >
        <el-form-item label="共享组名称" prop="name" style="max-width: 600px">
          <el-input v-model="groupForm.name" />
        </el-form-item>
        <el-form-item label="设置可见">
          <el-radio-group v-model="groupForm.kjRadio">
            <el-radio :label="1">仅自己可见</el-radio>
            <el-radio :label="2">所有人可见</el-radio>
            <el-radio :label="3">指定人员可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 使用新组件替换原有的部门树和人员选择 -->
        <el-form-item v-if="groupForm.kjRadio === 3" label="选择部门和人员">
          <GroupUserChoose 
            v-model="groupForm.userIdList"
            v-model:groupValue="groupForm.groupIdList"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="groupDialog = false">取消</el-button>
          <el-button type="primary" :loading="groupDialogLoading" @click="handleAddFolderSubmit(groupFormRef)">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改选择模型弹窗 -->
    <el-dialog v-model="modelDialog" title="选择模型" width="800px">
      <div class="model-list">
        <div 
          v-for="item in modelList" 
          :key="item.id" 
          class="model-item"
          :class="{ active: modelForm.modelId === item.id }"
          @click="handleSelectModel(item)"
        >
          <div class="model-icon">
            <img :src="getAvatarUrl(item.id)" alt="">
          </div>
          <div class="model-name">{{ item.name }}</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="modelDialog = false">取消</el-button>
          <el-button type="primary" :disabled="!modelForm.modelId" @click="handleModelSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 图片、文件 上传弹窗 -->
    <el-dialog v-model="resourceDialog" title="文件上传" width="700px">
      <el-form :model="resourceForm" ref="resourceFormRef" :rules="resourceRules" label-width="auto" style="max-width: 600px">
        <!-- <el-form-item label="文件" prop="url">
          <div class="file-upload-box">
            <div class="file-name" v-if="resourceForm.url">{{ resourceForm.title }}</div>
            <el-button type="primary" v-if="!resourceForm.url" @click="handleUploadResource">上传文件</el-button>
            <el-button type="primary" v-else @click="handleUploadResource">重新上传</el-button>
          </div>
        </el-form-item> -->
        <el-form-item label="文件名称" prop="title">
          <el-input v-model="resourceForm.title" placeholder="上传后自动填充或手动输入"/>
        </el-form-item>
        <el-form-item label="标签" prop="tagList">
          <TagMannage v-model="tagList" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resourceDialog = false">取消</el-button>
          <el-button type="primary" :loading="resourceDialogLoading" @click="handleAddResourceSubmit(resourceFormRef)">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <FilesUpload v-if="showFilesUpload" v-model:showDialog="showFilesUpload" :isPublic="false" :isToJpg="false" @getFileList="insertFiles"></FilesUpload>
    <el-drawer
      v-model="showPreview"
      title=""
      size="700px"
    >
      <ResourcePreview v-if="showPreview" :curShare="curShare"/>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { folderSelectPage, folderCreate, 
  folderDelete, folderUpdate
 } from '@/api/shareFolder'
import { shareResourceSelectPage,shareResourceDeleteList, 
   shareResourceUpdate, shareResourceCreateList,
 } from '@/api/shareResource'
import { getModelList } from '@/api/model'
import { ElMessageBox, ElMessage } from 'element-plus'
// import { download } from '@/utils/tools'                    
import { useRouter } from 'vue-router'
import TagMannage from '@/views/resource/manage/components/TagMannage.vue'
import { formatDate } from '@/utils/tools'
import { FilesUpload, ResourcePreview } from "@ruifox-cms/components"
import GroupUserChoose from './components/GroupUserChoose.vue'

const props = defineProps({
  isTmp: { // 是否是模板管理
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const curFileList = ref([])
const curFileListLoading = ref(false)
const curShare = ref(null)
const fieldList = ref([
  {
    title: '名称',
    name: 'name',
    showTextTip: true,
    width: 400
  },
  {
    title: '可见范围',
    name: 'curShare',
  },
  {
    title: '修改时间',
    name: 'update_time',
  },
  {
    title: '类型',
    name: 'modelId',
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options'
  }
])
const defaultQueryData = {
  currentPage: 1,
  pageSize: 15,
  total: 0,
  modelId: null, //模型id
  type: props.isTmp ? 1 : 0
}
const queryData = ref(structuredClone(defaultQueryData))
const fileType = ref(1) //1:共享组 2:文件
// 获取第一次层共享组文件夹
const folderSelectAsync = async () => {
  curFileListLoading.value = true
  curShare.value = null
  queryData.value.modelId = modelForm.value.modelId
  fileType.value = 1
  let res = await folderSelectPage(queryData.value).finally(() => {
    curFileListLoading.value = false
  })
  curFileList.value = res.data.list.map(item =>{
    return {
      ...item,
      fileExt: require(`@/assets/sourceManage/share.svg`),
    }
  })
  queryData.value.total = res.data.total
}

// 点击全部 查看共享组文件夹
const folderSelectPageAsync = async () => {
  modelForm.value = structuredClone(modelDefaultForm)
  queryData.value = structuredClone(defaultQueryData)
  folderSelectAsync()
}

// 根据共享组id获取资源
const defaultResourceQueryData = {
  modelId: null, //模型id
  shareId: null, //共享组id
}
const resourceQueryData = ref(structuredClone(defaultResourceQueryData))
const getCurFileList = async () => {
  curFileListLoading.value = true
  let params = {
    ...resourceQueryData.value,
    currentPage:queryData.value.currentPage,
    pageSize:queryData.value.pageSize,
    type: props.isTmp ? 1 : 0
  }
  fileType.value = 2
  const res = await shareResourceSelectPage(params).finally(() => {
    curFileListLoading.value = false
  })
  curFileList.value = res.data.list.map(item =>{
    return {
      ...item,
      fileExt: getAvatarUrl(item.modelId),
    }
  })
  console.log('curFileList.value',curFileList.value)
  queryData.value.total = res.data.total
}
const showPreview = ref(false)
// 点击文件/文件夹
const handleFileClick = async (val) => {
  if(fileType.value == 1){ //点击共享组 查资源
    curShare.value = val
    let model = modelList.value.find(item => item.id == val.modelId)
    modelForm.value.modelId = val.modelId
    modelForm.value.type = model.type
    modelForm.value.publishType = model.publishType
    resourceQueryData.value.shareId = val.id
    getCurFileList()
  }else{ //点击文件 打开抽屉预览
    // getCurFileList()
    curShare.value = val
    showPreview.value = true
  }
}

// 多选
const fileSelectionList = ref([])
const handleSelectionChange = (val) => {
  if(fileSelectionList.value.find(item => item.id == val.id)){
    fileSelectionList.value.splice(fileSelectionList.value.indexOf(val.id),1)
  }else{
    fileSelectionList.value.push(val)
  }
  if(process.env.NODE_ENV === 'development') console.log(fileSelectionList.value)
}
const handleSizeChange = (size) => {
  queryData.value.pageSize = size
  handleSearch()
}
const handleCurrentChange = (page) => {
  queryData.value.currentPage = page
  handleSearch()
}
/*********************** 新建文件夹 开始 ************************/
const groupDialog = ref(false)
const groupDialogLoading = ref(false)
const defaultGroupForm = {
  "groupIdList": [],
  "name": "",
  "userIdList": [],
  "modelId": null,
  'isPrivate': false, //仅自己可见
  'isCommon': false, //所有人可见
  'kjRadio': 1 //设置可见
}
const groupForm = ref(structuredClone(defaultGroupForm))
const groupFormRef = ref(null)
const groupRules = ref({
  name: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }]
})
const fromFolder = ref(false)
const handleAddFolder = async () => {
  groupForm.value = structuredClone(defaultGroupForm)
  if(modelForm.value.modelId) {
    groupForm.value.modelId = modelForm.value.modelId
    groupDialog.value = true
  }
  else{
    fromFolder.value = true
    modelDialog.value = true
  }
}
// 修改文件夹
const handleUpdateFolder = async (row) => {
  groupForm.value = structuredClone(row)
  groupForm.value.kjRadio = toshowKjParams(groupForm.value).value
  let model = modelList.value.find(item => item.id == row.modelId)
  modelForm.value.type = model.type
  modelForm.value.modelId = row.modelId
  modelForm.value.dataId = row.id
  modelForm.value.publishType = model.publishType
  groupDialog.value = true
}
const handleAddFolderSubmit = async () => {
  if(!modelForm.value.modelId){
    ElMessage.error('请选择模型!')
    return
  }
  await groupFormRef.value.validate()
  groupDialogLoading.value = true
  groupForm.value.modelId = modelForm.value.modelId
  geKjParams()
  let res = null
  if(groupForm.value.id){
    // 修改
    res = await folderUpdate(groupForm.value).finally(() => {
      handleSearch()
      groupDialogLoading.value = false
    })
  }else{
    // 新增
    res = await folderCreate(groupForm.value).finally(() => {
      handleSearch()
      groupDialogLoading.value = false
    })
  }
  if(res.code == 20000){
    groupDialog.value = false
  }else{
    ElMessage.error(res.msg)
  }
}
// 重置可见参数
const resetKjParams = () =>{
  groupForm.value.isPrivate = false
  groupForm.value.isCommon = false
  groupForm.value.isOther = false
}
// 设置可见参数
const geKjParams = () =>{
  resetKjParams()
  if(groupForm.value.kjRadio == 1){
    groupForm.value.isPrivate = true
  }else if(groupForm.value.kjRadio == 2){
    groupForm.value.isCommon = true
  }else{
    groupForm.value.isOther = true
  }
}
// 反显可见参数
const toshowKjParams = (val) =>{
  let value = 1
  let label = '仅自己可见'
  if(val.isPrivate){
   value = 1
   label = '仅自己可见'
  }else if(val.isCommon){
   value = 2
   label = '所有人可见'
  }else{
   value = 3
   label = '指定人员可见'
  }
  return {
    label,
    value
  }
}
/*********************** 新建文件夹 结束 ************************/
/*********************** 新建文件 开始 ************************/
const curFile = ref(null)
const addType = ref('文件夹中添加')

const handleAddFile = () => {
  curFile.value = null
  modelForm.value.dataId = null
  if(modelForm.value.modelId){ //如果当前有模型，直接打开弹窗
    handleModelSubmit()
    //在模型条件下，添加文件，无层级
    addType.value = '模型条件中添加'
  }else{
    modelDialog.value = true
    //在文件夹中，添加文件，有层级
    addType.value = '文件夹中添加'
  }
}

const modelDialog = ref(false)
const modelDefaultForm = {
  modelId: null, //模型id
  dataId: null, //文件id
  type: null, //资源类型
}
const modelForm = ref(structuredClone(modelDefaultForm))
// 文件上传弹窗
const resourceDialog = ref(false)
const resourceDialogLoading = ref(false)
const defaultResourceForm = {
  title: '',
  url: '',
}
const tagList = ref([])
const resourceFormList = ref([])
const resourceForm = ref(structuredClone(defaultResourceForm))
const resourceFormRef = ref(null)
const resourceRules = ref({
  // title: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
  url: [{ required: true, message: '请上传文件', trigger: 'blur' }]
})
// 跳转资源发布页
const handleModelSubmit = async () => {
  try {
    if(!modelForm.value.modelId){
      ElMessage.error('请选择模型')
      return
    }
    if(fromFolder.value){
      modelDialog.value = false
      handleAddFolder()
      fromFolder.value = false
      return
    }
    if(modelForm.value.type == 0){ //数据资源，如图片1、视频2、文件3
      resourceForm.value = structuredClone(defaultResourceForm)
      resourceFormList.value = []
      if(curFile.value?.id){ //编辑
        resourceForm.value.title = curFile.value.resourceData.title
        resourceForm.value.url = curFile.value.resourceData.url
        resourceForm.value.tagList = curFile.value.resourceData.tagList
      }
      if(fileType.value == 1){
        groupDialog.value = true
      }else{
        showFilesUpload.value = true
      }
    }else if(modelForm.value.type == 1){ //栏目资源，如文章、医生
      let url = router.resolve({
        path: '/resource/manage/setting',
        query: {
          modelId: modelForm.value.modelId,
          folderId: curShare.value?.id || 0,
          dataId: modelForm.value.dataId,
          publishType: modelForm.value.publishType, //1:文章/单页, 0:非文章
          creatIdField: 'shareId',
        }
      })
      window.open(url.href, '_blank')
    }
    modelDialog.value = false
  } catch (error) {
    console.log('表单验证失败')
  }
}

// 附件上传
const showFilesUpload = ref(false)
const insertFiles = filesList => {
  console.log('filesList共享',filesList)
  resourceFormList.value = filesList.map(item => {
    return {
      resourceData: {
        title: item.name,
        url: item.url,
        tagList: item.tagList,
      },
    }
  })
  handleAddResourceSubmit()
}
// 编辑/重命名 文件
const handleUpdateFile = async (row) => {
  curFile.value = row
  let model = modelList.value.find(item => item.id == row.modelId)
  modelForm.value.type = model.type
  modelForm.value.modelId = row.modelId
  modelForm.value.dataId = row.id
  modelForm.value.publishType = model.publishType
  if(modelForm.value.type == 1){ //栏目资源
    handleModelSubmit() //跳转编辑页
  }else{ //数据资源
    resourceForm.value = structuredClone(row.resourceData)
    resourceFormList.value = [structuredClone(row.resourceData)]
    tagList.value = row.resourceData.tagList ? structuredClone(JSON.parse(row.resourceData.tagList)) : []
    resourceDialog.value = true
  }
}
// 新建/编辑文件确定
const submitImgLoading = ref(false)
const handleAddResourceSubmit = async () => {
  const formData = {}
  try {
    submitImgLoading.value = true
    let res = null
    if (curFile.value?.id) { //编辑文件
      formData.id = curFile.value.id
      formData.modelId = modelForm.value.modelId
      formData.resourceData = resourceForm.value
      formData.resourceId = curFile.value.resourceData.id
      formData.resourceData.tagList = tagList.value
      res = await shareResourceUpdate(formData)
    } else { //新增文件
      formData.shareId = curShare.value.id
      formData.modelId = modelForm.value.modelId
      formData.resourceDataList = resourceFormList.value
      res = await shareResourceCreateList(formData)
    }
    submitImgLoading.value = false
    if (res.code === 20000) {
      ElMessage.success('上传成功')
      if (addType.value == '文件夹中添加') {
        folderSelectAsync()
      } else {
        getCurFileList()
      }
      resourceDialog.value = false
    }
  } catch (e) {
    console.log('新增/编辑文件失败',e);
    submitImgLoading.value = false
  }
}

/*********************** 新建文件 结束 ************************/
// 处理节点点击
const handleModelNodeClick = (val) => {
  if(val == null){
    modelForm.value.modelId = null
    modelForm.value.type = null
    modelForm.value.publishType = null
    folderSelectAsync()
    return
  }
  let data = allModelList.value.find(item => item.id == val)
  modelForm.value.modelId = (data.id || data.id == 0)? data.id : data.modelId
  modelForm.value.type = data.type
  modelForm.value.publishType = data.publishType
  folderSelectAsync()
}

// 模型类型列表
const modelList = ref([])
const allModelList = ref([])
const modelListLoading = ref(false)
const getModelListAsync = async () => {
  modelListLoading.value = true
  let params = {
    type: props.isTmp ? 1 : 0
  }
  let res = await getModelList(params).finally(() => {
    modelListLoading.value = false
  })
  if (res.code === 20000) {
    allModelList.value = [{id: null, name: '全部', type: 0, publishType: 0}, ...res.data]
    modelList.value = res.data
  }
}
getModelListAsync()
// 反显文件类型
const toShowType = (modelId) => {
  let obj = modelList.value.find(item => item.id == modelId)
  return obj ? obj.name : '-'
}
// 文件图标
const getAvatarUrl = (type) => {
  if (type) {
    try{
      // return require(`@/assets/sourceManage/${type}.svg`)
      return require(`@/assets/sourceManage/9.svg`)
    }catch(e){
      return require(`@/assets/sourceManage/9.svg`)
    }
  } else {
    return require(`@/assets/sourceManage/folder.svg`)
  }
}

// 批量放入回收站
const handleBatchDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要将选中的文件/文件夹放入回收站吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const params = {
      idList: []
    } 
    
    if(row){
      params.idList.push(row.id)
    }else{
      // 区分文件夹和资源文件
      fileSelectionList.value.forEach(item => {
        if (fileType.value == 2) {
          // 资源文件
          params.idList.push(item.id)
        } else {
          // 文件夹
          params.idList.push(item.id)
        }
      })
    }
    let res = null
    if(fileType.value == 2){
      res = await shareResourceDeleteList(params)
    }else{    
      res = await folderDelete(params)
    }
    if (res.code === 20000) {
      ElMessage.success('操作成功')
      handleSearch()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (error) {
    console.log('取消操作')
  }
}

const handleSelectModel = (model) => {
  modelForm.value = model
  modelForm.value.modelId = model.id
  modelForm.value.publishType = model.publishType
}

// 添加展开收起状态
// const isMyFileExpand = ref(true)

// 修改点击处理函数
// const handleClickMine = () => {
//   isMyFileExpand.value = !isMyFileExpand.value
// }

const handleSearch = () => {
  if(fileType.value == 1){
    folderSelectAsync()
  }else{
    getCurFileList()
  }
}

// 监听kjRadio变化
watch(() => groupForm.value.kjRadio, (newVal) => {
  if(newVal === 3) {
    // getDeptList() // 不再需要这个调用，因为组件会自己处理
  }
})

onMounted(() => {
  handleSearch()
  window['updatePage'] = val => {
    ElMessage({
      showClose: true,
      message: val,
      type: 'success'
    })
    handleSearch()
  }
})
</script>
<style scoped lang="scss">
.model-manage {
  .header-option {
    margin-bottom: 10px;
  }
  .file-path {
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
  .list-content{
    display: flex;
    gap: 20px;
    
    .filter-sidebar {
      width: 150px;
      background: #fff;
      border-radius: 4px;
      padding-right: 16px;
      border-right: 1px #eee solid;
      flex-shrink: 0;
      .filter-group {
        margin-bottom: 12px;

        .filter-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          margin-bottom: 8px;
          font-size: 14px;
          color: #333;
          font-weight: 600;
          i{
            margin-right: 4px;
          }
          .arrow-icon{
            transition: all 0.3s;
            font-weight: 500;
            font-size: 10px;
            &.is-expand{
              transform: rotate(90deg);
            }
          }
        }

        .filter-list {
          padding-left: 0px;
          .filter-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            padding-left: 0px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
            .option-icon{
              visibility: hidden;
            }
            &:hover {
              background-color: #f5f7fa;
              .option-icon{
                visibility: visible;
              }
            }
            
            &.active {
              background-color: #ecf5ff;
              color: $mainColor;
            }

            .model-name {
              font-size: 14px;
              padding-left: 20px;
            }
            .file-item{
              display: flex;
              align-items: center;
              .file-img{
                width: 18px !important;
                height: 18px !important;
                margin-right: 5px;
              }
            }
          }
          .model-line{
            border-bottom: 1px solid #666;
          }
        }
      }
      .filter-group1{
      }
    }

    .file-list-container {
      flex: 1;
      .hide-prefix{
        visibility: hidden;
      }

      .file-item-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .file-item {
          display: flex;
          align-items: center;
          .thumb-box{
            width: 20px;
            height: 20px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            .thumb-img {
              max-width: 100%;
              max-height: 100%;
            }
          }
          .file-name {
            cursor: pointer;
          }
          .file-img {
            width: 18px !important;
            height: 18px !important;
            margin-right: 10px;
          }
        }
        &:hover {
          .operation-buttons{
            display: flex !important;
          }
          .file-name {
            text-decoration: underline;
          }
        }
      }
    }
  }
  .operation-buttons {
    flex-shrink: 0;
    padding-left: 20px;
    display: none;
    align-items: center;
    .el-dropdown-link{
      color: $mainColor;
      padding: 0 10px;
      cursor: pointer;
      .iconfont{
        font-size: 14px;
        margin-top: 2px;
      }
    }
  }

  .model-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    padding: 20px;

    .model-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        border-color: $mainColor;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }

      &.active {
        border-color: $mainColor;
        background-color: #f5f7fa;
      }

      .model-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
        
        img {
          width: 100%;
          height: 100%;
        }
      }

      .model-name {
        font-size: 14px;
        color: #606266;
        text-align: center;
      }
    }
  }
}

::v-deep(.choose-check-box){
  display: none !important;
}
::v-deep(.el-radio){
  margin-right: 10px;
}
</style>
